import React, { useState, useEffect } from 'react';
import { Form, Input, Button, message } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { api } from '../../api';
import { setUserInfo, setToken } from '../../store/slices/userSlice';
import './style.scss';

const Login = () => {
  const [loading, setLoading] = useState(false);
  const [captchaUrl, setCaptchaUrl] = useState('/api/sys/getVerify');
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useDispatch();
  const { token } = useSelector(state => state.user);

  // 如果已经登录，直接跳转到首页
  useEffect(() => {
    if (token) {
      navigate('/home');
    }
  }, [token, navigate]);

  // 刷新验证码
  const refreshCaptcha = () => {
    setCaptchaUrl(`/api/sys/getVerify?t=${new Date().getTime()}`);
  };

  const onFinish = async (values) => {
    setLoading(true);
    try {
      const res = await api.login(values);
      console.log('登录响应:', res); // 添加日志，查看响应数据结构

      if (res.code === 0 || res.code === 200) {
        // 保存用户信息到Redux
        dispatch(setUserInfo(res.data));

        // 从响应中获取token
        // 根据后端LoginRespVO类的定义，token字段名为accessToken
        let tokenValue = null;

        // 尝试从不同位置获取token
        if (res.data?.accessToken) {
          // LoginRespVO中的accessToken字段
          tokenValue = res.data.accessToken;
        } else if (res.data?.tokenInfo?.tokenValue) {
          // SaToken可能的返回格式
          tokenValue = res.data.tokenInfo.tokenValue;
        } else if (res.data?.token) {
          // 其他可能的格式
          tokenValue = res.data.token;
        } else if (res.token) {
          // 响应根级别的token
          tokenValue = res.token;
        }

        // 如果在响应中找不到token，尝试从cookie中获取
        if (!tokenValue) {
          // 尝试从cookie中获取SaToken
          const cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.startsWith('satoken=')) {
              tokenValue = cookie.substring('satoken='.length, cookie.length);
              break;
            }
          }
        }

        // 如果仍然找不到token，使用用户ID作为临时token
        // 这不是理想的解决方案，但可以临时解决问题
        if (!tokenValue && res.data?.id) {
          console.warn('未在响应或cookie中找到token，使用用户ID作为临时token');
          tokenValue = `temp-token-${res.data.id}-${Date.now()}`;
        }

        if (tokenValue) {
          // 保存token到Redux和localStorage
          dispatch(setToken(tokenValue));
          localStorage.setItem('token', tokenValue);

          message.success('登录成功');

          // 检查是否有之前尝试访问的页面
          const { from } = location.state || { from: '/home' };
          // 跳转到之前尝试访问的页面或首页
          navigate(from, { replace: true });
        } else {
          console.error('无法获取有效的token');
          message.error('登录成功但无法获取认证信息，请联系管理员');
        }
      } else {
        message.error(res.msg || '登录失败，请检查用户名和密码');
        // 登录失败时刷新验证码
        refreshCaptcha();
      }
    } catch (error) {
      console.error('登录错误:', error);
      message.error('登录失败，请稍后再试');
      // 登录出错时刷新验证码
      refreshCaptcha();
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-page">
      <div className="login-box">
        <h2>网络攻击仿真系统</h2>
        <Form onFinish={onFinish}>
          <Form.Item name="username" rules={[{ required: true, message: '请输入用户名' }]}>
            <Input placeholder="用户名" />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password placeholder="密码" />
          </Form.Item>
          <Form.Item name="captcha" rules={[{ required: true, message: '请输入验证码' }]}>
            <div className="captcha-container">
              <Input placeholder="验证码" />
              <img
                src={captchaUrl}
                alt="验证码"
                onClick={refreshCaptcha}
                style={{ cursor: 'pointer' }}
              />
            </div>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" loading={loading} block>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;
